﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back">返回</a>

        </mt-header>

        <div class="mui-content" style="background-color:#f5f5f5;">

            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>标题</label>
                    <input type="text" placeholder="请输入标题" v-model="mytitle">
                </div>

                <div class="mui-input-row">
                    <label>班级</label>
                    <span class="mui-pull-right" @click="chooseclass()" style="margin-right:10px;">{{classname}}</span></a>
                </div>
                <div class="mui-table-view-cell">
                    <p class="ha4_text4">
                        添加照片：
                    </p>
                    <div class="ha4_box8 clearfix" id="imgList">
                        <div v-for="item in saveImages.previewThumbList" class="ha4_box9 clearfix" v-bind:style="{backgroundImage:'url(' + item + ')'}" style="display:block;">
                            <img class="ha4_image1 image" src="../assets/images/dhtic16.png" @click="delImg(item)" />
                        </div>
                        <div id="addDiv" class="ha4_box10 clearfix" @click="selectMenu"></div>
                    </div>

                </div>

                <div class="mui-input-row">
                    <label>完成时间</label>
                    <span class="mui-pull-right" @click="openPicker()" style="margin-right:10px;">{{overtime}}</span></a>
                </div>

                <div class="mui-input-group" style="padding-left:10px;">
                    <textarea id="textarea" rows="5" v-model="desc" placeholder="作业内容"></textarea>
                </div>
                <p style="text-align:center;margin-top:20px;padding-bottom:20px;">
                    <Button type="error" shape="circle" style="width:80%;background-color:#fea00a" @click="sub">提交</Button>
                </p>

            </form>
        </div>
        <mt-datetime-picker ref="picker"
                            v-model="pickerVisible"
                            type="date"
                            year-format="{value} 年"
                            month-format="{value} 月"
                            :start-date='startData'
                            :end-date="endDate"
                            @confirm="queDing">
        </mt-datetime-picker>

        <mt-popup class="sharePopup" v-model="popupVisible" position="bottom" style="width:100%;">
            <Row style="margin-top:10px;">
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="close">取消</a>
                </Col>
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="savetype">确定</a>
                </Col>
            </Row>


            <mt-picker :slots="slots" value-key="classname" @change="typechange"></mt-picker>

        </mt-popup>
    </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    import { DatetimePicker } from 'mint-ui';
    import Bus from '../bus.js'
    import wx from 'weixin-js-sdk'
    export default {
        name: 'app',
        data() {
            return {
                title: '布置作业',
                mytitle:"",
                startData: new Date(),
                endDate: new Date(),
                pickerVisible: new Date(),
                classname: "请选择",
                classnametext:"",
                overtime: "请选择",
                classid: 0,
                desc: "",
                popupVisible: false,
                classid: "",
                images: {
                    localId: [], //已选择的本地图片
                    serverId: [] //微信服务器返回的mediaId
                },
                saveImages: {
                    previewImageList: [], //预览大图数组,
                    previewThumbList: [], //预览缩略图数组
                    saveImageList: [], //预览大图数组//保存图片
                },
                slots: []

            }
        },
        components: {

        },
        mounted() {
            this.wxInit();
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.onpopstate = () => {
                Bus.$emit('val', "hide");
                this.$router.go(-1);
            }
        },
        methods:
        {
            wxInit: function () {

                var url = window.location.href.split('#')[0];

                this.$api.post('wx/Index/wxquanxian', {
                    "url": url
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);

                        var res = response.data;
                        wx.config({
                            debug: false, // 开启调试模式,
                            appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                            timestamp: res.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.nonceStr, // 必填，生成签名的随机串
                            signature: res.signature,// 必填，签名，见附录1
                            jsApiList: ['checkJsApi', 'chooseImage',
                                'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData']
                        });

                    } else {
                        //  console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            selectMenu: function () {

                var _this = this;
                wx.chooseImage({
                    count: 9, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {

                        _this.images.localId = res.localIds;

                        let length = res.localIds.length;
                        if (length == 0) {
                            _this.$alert("请选择图片");
                            return;
                        }
                        var i = 0

                        _this.images.serverId = []



                        function upload() {
                            wx.uploadImage({
                                localId: _this.images.localId[i],
                                success: function (res) {
                                    i++;
                                    _this.images.serverId.push(res.serverId);
                                    //下载刚刚上传的图片

                                    _this.$api.post('wx/Index/uploadimg', {
                                        "serverId": res.serverId
                                    }, response => {
                                        if (response.status >= 200 && response.status < 300) {


                                            _this.saveImages.previewThumbList.push(response.data);//将缩略图上传的位置
                                        } else {
                                            //  console.log(response.message);
                                            //请求失败，response为失败信息
                                        }
                                    });




                                    if (i < length) {
                                        upload();
                                    }
                                },
                                fail: function (res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                            //_this.$emit('saveImages', _this.saveImages.saveImageList)
                        }

                        upload();



                    },
                    cancel: function () {
                        alert("已取消选择");
                    }
                });

            },
            delImg: function (img) {
                var index = this.saveImages.previewThumbList.indexOf(img);
                this.saveImages.previewThumbList.splice(index, 1);
            },
            chooseclass: function () {
                this.$data.popupVisible = true;

            },
            close: function () {
                this.$data.popupVisible = false;
            },
            savetype: function () {
                if (this.$data.classnametext == "") {
                    this.$data.classname = "请选择";
                } else {
                    this.$data.classname = this.$data.classnametext;
                }
              
                this.$data.popupVisible = false;
            },
            typechange: function (picker, values) {
                console.log(values);
                if (values.length > 0) {
                    this.$data.classnametext = values[0].classname;
                    this.$data.classid = values[0].id;
                }

            },
            sub: function () {
                var userid = window.localStorage.getItem('userid');
                var title = this.$data.mytitle;
                var desc = this.$data.desc;
                var overtime = this.$data.overtime;
                var classid = this.$data.classid;
                var imglist = this.saveImages.previewThumbList.join(',');
                this.$api.post('wx/Index/workadd', {
                    "userid": userid,
                    "title": title,
                    "desc": desc,
                    "overtime": overtime,
                    "classid": classid,
                    "imglist": imglist
                }, response => {
                  
                    if (response.status >= 200 && response.status < 300) {
                        var data = response.data;
                        if (data.status == 200) {
                            Toast(data.message);
                            Bus.$emit('val', "show")
                            this.$router.push("home");

                        } else {
                            Toast(data.message);
                        }
                        //this.$data.code = response.data;

                        //请求成功，response为成功信息参数
                    } else {

                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            openPicker() {
                this.$refs.picker.open();
            },
            queDing(e) {

                this.$data.overtime = e.getFullYear() + "-" + (parseInt(e.getMonth()) + 1) + "-" + e.getDate();



            },
            load: function () {
                var _this = this;
                var endDate = new Date();
                endDate.setFullYear(endDate.getFullYear() + 10);
                this.$data.endDate = endDate;
                var mid = window.localStorage.getItem('mid');
                this.$api.post('wx/Index/getclass', {
                    "mid": mid
                }, response => {

                    if (response.status >= 200 && response.status < 300) {
                        var data = response.data;
                        if (data.status == 200) {
                            var obj = {
                                classid: 0,
                                classname:"请选择"
                            }
                            data.data.unshift(obj);
                            let dateSlots = [
                                {
                                    flex: 1,
                                    values: data.data,
                                    className: 'slot1',
                                    textAlign: 'center'
                                }
                            ];

                            _this.$data.slots = dateSlots;


                        } else {

                        }

                    } else {


                    }
                });


            },
            back: function () {
               
                this.$router.go(-1);
            }
        },
        created: function () {
            this.load();
        }

    }
</script>

<style scoped>

    .ha4_text4 {
        float: none;
        font-size: 0.9em;
        width: 96%;
        height: auto;
        text-align: left;
        font-weight: normal;
        line-height: 1em;
        margin: 1em auto 0px;
        clear: none;
        min-height: 0px;
        min-width: 0px;
        color: rgb(141, 141, 141);
    }

    .ha4_box8 {
        float: none;
        height: auto;
        margin: 1em auto 0px;
        clear: none;
        width: 94%;
        min-height: 4.5em;
    }

    .ha4_box10 {
        float: left;
        height: 4.5em;
        margin-left: 0.7em;
        margin-top: 0px;
        clear: none;
        width: 4.5em;
        min-height: 50px;
        border: 1px solid rgb(195, 195, 195);
        margin-right: 0.7em;
        position: relative;
        top: 0px;
        left: 0px;
        z-index: 1;
        background-image: url("../assets/images/addt.png");
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat no-repeat;
    }

    .ha4_box9 {
        float: left;
        height: 4.5em;
        margin-left: 0.7em;
        margin-top: 0px;
        clear: none;
        width: 4.5em;
        min-height: 50px;
        border: 1px solid rgb(195, 195, 195);
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
        margin-right: 0.7em;
        position: relative;
        top: 0px;
        left: 0px;
        z-index: 1;
        background-position: 50% 50%;
        background-repeat: no-repeat no-repeat;
    }

    .ha4_image1 {
        float: left;
        width: 1.5em;
        max-width: 100%;
        height: 1.5em;
        clear: none;
        color: rgb(0, 0, 0);
        position: absolute;
        top: -0.6em;
        left: auto;
        z-index: 50;
        right: -0.6em;
        bottom: auto;
    }
</style>